<!-- 签名 -->
<template>
    <div class='fsdfsdtryty bgff pd pt10 pm10'>
       
        <div class="pm10 display-flex">
            <p class="flex-1">
                请在虚线里签名
            </p>
            <i class="iconfont dx-close sdfsdfsdtt" @click="hidepup"></i>
        </div>
        <canvas ref="dxqm" class="canvas " width="500" height="200"></canvas>
        <div class="  tr">
            <n-button @click="toClear">清除</n-button>
            <n-button class="ml10" type="success" @click="toSave">上传签名</n-button>
        </div>

    </div>
</template>
<script lang='ts' setup>
import { ref, onMounted } from "vue"
import {dxpost} from "../../util/index"
const emit = defineEmits(["hidePup",'updataImg']);
const dxqm = ref()
let ctx = null
const hidepup = ()=>{
emit('hidePup')
}

const huabi = (startX, startY, endX, endY, ctx) => {
    ctx.beginPath();
    ctx.globalAlpha = 1;
    ctx.lineWidth = 2;
    ctx.strokeStyle = "#000";
    ctx.moveTo(startX, startY);
    ctx.lineTo(endX, endY);
    ctx.closePath();
    ctx.stroke();
}

const toClear = () => {
    ctx.clearRect(0, 0, 500, 200);
}
const toSave = async() => {
    const canva = dxqm.value;
    let base64Str = canva.toDataURL().split("data:image/png;base64,")[1];
    const res  = await dxpost('util/upbase64ToPng',{base64: base64Str,qmname:localStorage.userNmae+'qm'})
        emit('updataImg')
}

setTimeout(() => {
    const canva = dxqm.value;;
    if (canva.getContext) {
        ctx = canva.getContext("2d");
        const background = "#fff";
        ctx.lineCap = "round";
        ctx.fillStyle = background;
        ctx.lineWidth = 2;
        ctx.fillRect(0, 0, 680, 200);
        let th = this;
        canva.onmousedown = function (event) {
            let x = event.clientX - this.offsetLeft,
                y = event.clientY - this.offsetTop;
            document.onmousemove = function (event) {
                var x1 = event.clientX - canva.offsetLeft;
                var y1 = event.clientY - canva.offsetTop;
                huabi(x, y, x1, y1, ctx);
                x = x1;
                y = y1;
            };
        };
        document.onmouseup = function () {
            this.onmousemove = null;
        };
    }
}, 500);

</script>
<style scoped>
.fsdfsdtryty {}

.canvas {
    border: 1px dashed #e0e0e0;
}
.sdfsdfsdtt{
    cursor:pointer;
    font-size: 20px;
}
</style>